<template>
  <van-cell-group inset>
    <!-- 输入任意文本 -->
    <van-field v-model="name" label="昵称"/>
    <van-radio-group v-model="checked">
      <van-cell-group inset>
        <van-cell title="男生" clickable @click="checked = '男生'">
          <template #right-icon>
            <van-radio name="男生"/>
          </template>
        </van-cell>
        <van-cell title="女生" clickable @click="checked = '女生'">
          <template #right-icon>
            <van-radio name="女生"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <van-field v-model="phone" type="digit" label="电话"/>
    <van-field v-model="email" label="邮箱"/>
    <div className="confirm">
      <van-button type="primary" round @click="confirmUpdate">确认修改</van-button>
    </div>
  </van-cell-group>
</template>

<script setup>

import {ref} from "vue";
import {currentUser} from "../config/globalConfig";
import {userUpdateInfo} from "../api/request";
import {Toast} from "vant";
import route from "../config/route";

const name = ref(currentUser.userName)
const phone = ref(currentUser.phone)
const email = ref(currentUser.email)
let checked = ref(currentUser.gender)

// 确认修改信息
const confirmUpdate = async () => {
  currentUser.userName = name.value
  currentUser.gender = checked.value
  currentUser.phone = phone.value
  currentUser.email = email.value
  try {
    let result = await userUpdateInfo(currentUser)
    result = result.data
    console.log(result)
    if (result.statusCode !== 0) {
      Toast.fail('信息存储错误', result.description)
    } else {
      Toast('修改成功!')
      await route.push('/user')
    }
  } catch (err) {
    console.log(err)
  }
}

</script>

<style scoped>
.confirm {
  padding-top: 20%;
  padding-left: 35%;
}
</style>